<template>
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 雷达图
// const echarts = require('echarts/lib/echarts')
// require('echarts/lib/component/radar')
import * as echarts from 'echarts'
export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例

    myChart.setOption({

      radar: {
        radius: '55%',
        center: ['47%', '50%'], // 位置
        indicator: [
          { text: '逻辑思维', max: 400 },
          { text: '项目相关', max: 400 },
          { text: '基础知识', max: 400 },
          { text: '理论基础', max: 400 },
          { text: '高阶技术', max: 400 }
        ],
        xAxis: {
          alignTicks: false
        },

        name: {
          textStyle: {
            padding: [-10, -10]
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: '#ccc' // 图表背景的颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: '#fff' // 设置网格的颜色
          }
        }
      },
      series: (function() {
        var series = []

        for (var i = 1; i <= 28; i++) {
          series.push({
            type: 'radar',
            symbol: 'none',
            areaStyle: { color: '#32dadd' },
            data: [
              {
                value: [300, 290, 230, 260, 290]
              }
            ]
          })
        }
        return series
      })()
    })
  }
}
</script>

<style>
.radar-echart {
    height: 220px;
}
</style>
